<template>
	<div class="userInfo-page">
		<el-row :gutter="16" style="max-width: 1920px; margin: 0 auto">
			<el-col :span="4">
				<el-card class="setting-card" shadow="never">
					<template #header>
						<div class="set-title">
							<el-icon class="mr5"><ele-Operation /></el-icon>
							个人设置
						</div>
					</template>
					<div class="menu-items">
						<div class="menu-item" :class="{ active: active == 1 }" @click="handleTabClick(1, '基本设置')">
							<div class="label">基本设置</div>
							<div class="value">个人账户信息设置</div>
						</div>
						<div class="menu-item" :class="{ active: active == 2 }" @click="handleTabClick(2, '安全设置')">
							<div class="label">安全设置</div>
							<div class="value">密码信息设置</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="20">
				<el-card shadow="never">
					<template #header>
						<div class="main-title">{{ title }}</div>
					</template>
					<el-form v-show="active == 1" ref="paramsFormRef" class="params-form" label-position="top" :model="paramsForm" :rules="paramsRules">
						<el-row :gutter="16">
							<el-col :span="12">
								<el-row :gutter="16" justify="start">
									<el-col :span="24">
										<el-form-item class="form-item" label="用户账号:" prop="userName">
											<span style="padding-left: 5px">{{ userName }}</span>
										</el-form-item>
									</el-col>

									<el-col :span="24">
										<el-form-item class="form-item" label="用户昵称:" prop="nickName">
											<el-input v-model="paramsForm.nickName" placeholder="请输入用户昵称" />
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item class="form-item" label="用户性别:" prop="sex">
											<el-radio-group v-model="paramsForm.sex">
												<el-radio :value="'0'">男</el-radio>
												<el-radio :value="'1'">女</el-radio>
												<el-radio :value="'2'">未知</el-radio>
											</el-radio-group>
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item class="form-item" label="手机号码:" prop="phonenumber">
											<el-input v-model="paramsForm.phonenumber" placeholder="请输入手机号码" />
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item class="form-item" label="用户邮箱:" prop="email">
											<el-input v-model="paramsForm.email" placeholder="请输入邮箱" />
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
							<el-col :span="12">
								<el-col :span="24">
									<el-form-item class="form-item" label="头像:" prop="avatar">
										<UploadPictureCard ref="uploadRef" v-model="paramsForm.avatar" :params="{ bucketName: 'public-images' }" :limit="1" />
									</el-form-item>
								</el-col>
							</el-col>
						</el-row>
						<el-button type="primary" v-throttle @click="handleUpdateInfo">更新基本信息</el-button>
					</el-form>
					<el-form v-show="active == 2" ref="pwdRef" class="params-form" label-position="top" :model="pwdForm" :rules="pwdFormRules">
						<el-row :gutter="16">
							<el-col :span="12">
								<el-row :gutter="16" justify="start">
									<el-col :span="24">
										<el-form-item class="form-item" label="原密码:" prop="oldPassword">
											<el-input v-model="pwdForm.oldPassword" :type="passwordOldType" placeholder="请输入用户原密码">
												<template v-if="passwordOldType === 'password'" #suffix>
													<el-icon @click="passwordOldType = 'text'"><ele-Hide /></el-icon>
												</template>
												<template v-else #suffix>
													<el-icon @click="passwordOldType = 'password'"><ele-View /></el-icon>
												</template>
											</el-input>
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item class="form-item" label="用户新密码:" prop="newPassword">
											<el-input v-model="pwdForm.newPassword" :type="passwordType" placeholder="请输入用户新密码">
												<template v-if="passwordType === 'password'" #suffix>
													<el-icon @click="passwordType = 'text'"><ele-Hide /></el-icon>
												</template>
												<template v-else #suffix>
													<el-icon @click="passwordType = 'password'"><ele-View /></el-icon>
												</template>
											</el-input>
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item class="form-item" label="确认密码:" prop="prePwd">
											<el-input v-model="pwdForm.prePwd" :type="passwordPreType" placeholder="请输入确认密码">
												<template v-if="passwordPreType === 'password'" #suffix>
													<el-icon @click="passwordPreType = 'text'"><ele-Hide /></el-icon>
												</template>
												<template v-else #suffix>
													<el-icon @click="passwordPreType = 'password'"><ele-View /></el-icon>
												</template>
											</el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
							<el-col :span="24">
								<el-button type="primary" v-throttle @click="handleUpdatePwd">修改密码</el-button>
							</el-col>
						</el-row>
					</el-form>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script setup>
import global from '@/utils/global'
import UploadPictureCard from '@/components/UploadPictureCard.vue'
import { MD5 } from 'crypto-js'
import { Session, removeToken } from '@/utils/storage'

const active = ref(1)
const title = ref('基本设置')
const userName = ref(null)
const state = reactive({
	paramsForm: {
		phonenumber: null, //手机号码
		email: null, //邮箱
		userName: null, //用户名称
		sex: '0', //用户性别
		avatar: null,
	},
	paramsRules: {
		nickName: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
		phonenumber: [
			{ required: true, message: '请输入手机号码', trigger: 'blur' },
			{
				pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
				message: '手机号格式不正确',
			},
		],
		email: [
			{ required: true, message: '用户邮箱不能为空', trigger: 'blur' },
			{ pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '邮箱格式不正确' },
		],
	},
	paramsFormRef: null,
	// 密码调整
	pwdRef: null,
	passwordType: 'password',
	passwordPreType: 'password',
	passwordOldType: 'password',
	pwdForm: {},
	pwdFormRules: {
		oldPassword: [{ required: true, message: '请输入用户原密码', trigger: 'blur' }],
		newPassword: [
			{
				required: true,
				validator: (rule, value, callback) => {
					if (!value) {
						callback(new Error('用户密码不能为空！'))
					} else if (value.length < 8) {
						callback(new Error('密码不能低于8位!'))
					} else if (!/^.*(?=.{8,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/.test(value)) {
						callback(new Error('密码须包含大小写字母、数字、特殊符号@、#、！'))
					} else {
						callback()
					}
				},
				trigger: 'blur',
			},
		],
		prePwd: [
			{
				required: true,
				validator: (rule, value, callback) => {
					if (!value) {
						callback(new Error('确认密码不能为空！'))
					} else if (value != state.pwdForm.newPassword) {
						callback(new Error('两次输入的密码不一致！'))
					} else {
						callback()
					}
				},
				trigger: 'blur',
			},
		],
	},
})
const { paramsForm, paramsRules, paramsFormRef, passwordType, passwordOldType, passwordPreType, pwdRef, pwdForm, pwdFormRules } = toRefs(state)

onMounted(() => {
	getDataInfo()
})

/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-11-20 09:08:43
 */
const getDataInfo = () => {
	global.$fetchGetData(`/meta-system/web/v1/sysUser/getInfo`, {}).then(data => {
		if (data.code == 200) {
			state.paramsForm.nickName = data.data.user.nickName
			state.paramsForm.sex = data.data.user.sex
			state.paramsForm.phonenumber = data.data.user.phonenumber
			state.paramsForm.email = data.data.user.email
			state.paramsForm.avatar = data.data.user.avatar
			userName.value = data.data.user.userName
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
const handleUpdateInfo = () => {
	state.paramsFormRef.validate(valid => {
		if (valid) {
			global.$fetchPostData(`/meta-system/web/v1/sysUser/updateUserInfoSelf`, state.paramsForm).then(data => {
				if (data.code == 200) {
					global.$baseMessage('更新成功！', 'success')
				} else {
					global.$baseMessage(data.msg, 'error')
				}
			})
		} else {
			return false
		}
	})
}
const handleUpdatePwd = () => {
	state.pwdRef.validate(valid => {
		if (valid) {
			global
				.$fetchPostData(`/meta-system/web/v1/sysUser/updatePwd`, {
					oldPassword: MD5(state.pwdForm.oldPassword).toString(),
					newPassword: MD5(state.pwdForm.newPassword).toString(),
				})
				.then(data => {
					if (data.code == 200) {
						global.$baseMessage('密码修改成功！', 'success')
						Session.clear()
						removeToken()
						// 使用 reload 时，不需要调用 resetRoute() 重置路由
						window.location.reload()
					} else {
						global.$baseMessage(data.msg, 'error')
					}
				})
		} else {
			return false
		}
	})
}
const handleTabClick = (status, label) => {
	active.value = status
	title.value = label
}
</script>
<style lang="scss" scoped>
.set-title {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.menu-items {
	width: 100%;
	.menu-item {
		width: 100%;
		height: 52px;
		cursor: pointer;
		padding-top: 5px;
		padding-left: 16px;
		padding-right: 16px;
		.label {
			font-size: 14px;
			color: #515a6e;
			line-height: 1.6;
		}
		.value {
			font-size: 12px;
			line-height: 1.2;
			color: #515a6e;
		}
		&.active {
			background-color: rgba(0, 82, 204, 0.2);
			.label {
				color: #0052cc;
			}
			.value {
				color: #0052cc;
			}
		}
		&:hover {
			background-color: #f3f3f3;
		}
	}
}
:deep() {
	.setting-card {
		.el-card__body {
			padding: 16px 0px;
		}
	}
}
</style>
